<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用户登陆</title>
    <script src="${ctx}/resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <link href="${ctx}/resources/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"/>
    <link href="${ctx}/resources/bootstrap/css/bootstrap-responsive.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .main {
            color: #666666;
            height: 230px;
            margin: auto;
            position: relative;
            text-align: left;
            margin-top: 12%;
            width: 600px;
        }

        .main .logo {
            float: left;
            height: 128px;
            width: 280px;
            text-align: center;
        }

        .logo img {
            height: 210px;
            margin: auto;
        }

        .main .content {
            float: left;
            width: 310px;
        }

        .content form {
            height: 185px;
            vertical-align: middle;
            border-left: 1px outset #5D9AD7;
        }

        form table {
            margin: 20px auto auto;
            line-height: 28px;
            text-align: center;
        }

        .logo {
            border: 0 none;
            height: 188px;
            max-width: 100%;
            vertical-align: middle;
            width: 235px;
        }
    </style>
</head>
<body>
<div class="main well">
    <div class="logo">
        <img alt="logo" src="${ctx}/resources/css/image/logo.big.png"/>
    </div>
    <div class="content">
        <div id="errorMsg" style="color: red; text-align: center; font-size: 14px;">
            <c:if test="${SPRING_SECURITY_LAST_EXCEPTION != null }">
                <span>${SPRING_SECURITY_LAST_EXCEPTION}</span>
            </c:if>
        </div>
        <form method="post" id="loginForm" action="${ctx }/j_spring_security_check">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="j_username" id="j_username">
                    </td>
                </tr>
                <tr>
                    <td>密 码：</td>
                    <td>
                        <input type="password" name="j_password"/>
                    </td>
                </tr>
                <tr>
                    <td>验证码：</td>
                    <td align="left">
                        <input type="text" name="j_verifyCode" id="verifyCode" maxlength="8" style="width: 70px;">
                        <img title="点击更换" style="vertical-align: top;" id="validateCode"
                             src="${ctx }/frame/validateCode"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="_spring_security_remember_me" name="_spring_security_remember_me" type="checkbox"
                               value="true"/>
                    </td>
                    <td align="left">记住用户名</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" id="submitBtn" class="btn" value="提 交">
                        <input value="重 置" type="reset" class="btn">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //$("#j_username").focus();
        $("#validateCode").click(function () {
            var url = "${ctx }/frame/validateCode?" + Math.random();
            $(this).attr("src", url);
        });
        $("#verifyCode").keydown(function (e) {
            if (e.keyCode == 13) {
                $("#submitBtn").click();
            }
        });
        $("#submitBtn").click(function () {
            $("#errorMsg").html("");
            if ($.trim($("#verifyCode").val()) == "") {
                $("#errorMsg").html("请输入验证码！");
            } else {
                $.post("${ctx }/frame/verifyCode", {
                    verifyCode: function () {
                        return $.trim($("#verifyCode").val());
                    }
                }, function (r) {
                    if (r) {
                        $("#loginForm").submit();
                    } else {
                        $("#errorMsg").html("验证码错误！");
                        $("#validateCode").click();
                    }
                }, "json")
            }
        });
    });
</script>
</body>
</html>